.my-icon {
  --my-icon-color: inherit;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  fill: currentColor;
  color: var(--my-icon-color);
  font-size: inherit;
}

@each $name in (primary, success, danger, warning, info) {
  .my-icon--#{$name} {
    --my-icon-color: var(--my-color-#{$name});
  }
}